<template>
    <div class="echart-attr">
        <!-- 标题 / 单位 -->
        <div class="attribute-echart-title-unit main-panel-wrap-border" v-if="chart.showTitleUnit(currentElementList[0].component)">
            <div class="main-panel-title">
                <span>标题 / 单位</span>
            </div>
            <div class="main-panel-content-wrap">
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">标题</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getTitleName()" @input="chart.setTitleText(currentElementList[0], JQuery('#' + chart.getTitleName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 49)" class="mas-basis-input mas-basis-input2" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-3 pl-60" v-show="currentElementList[0].attribute.chartOption.option.title[0].text">
                    <div class="main-mas-input-simple">
                        <div class="mas-basic-layout">
                            <el-color-picker @change="chart.setTitleColor(currentElementList[0], $event);history.addHistory(store.clone(), 50); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.title[0].textStyle.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                        </div>
                    </div>
                    <div class="main-mas-input-simple similar-checkbox-single-bg">
                        <div :id="chart.getTitleFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.title[0].textStyle.fontWeight === 'bolder' }" @click="chart.setTitleFontWeight(currentElementList[0]);history.addHistory(store.clone(), 51); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                            <img src="../../../image/main/icon_attribute_bold.svg">
                        </div>
                        <div :id="chart.getTitleFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.title[0].textStyle.fontStyle === 'oblique' }" @click="chart.setTitleFontStyle(currentElementList[0]);history.addHistory(store.clone(), 52); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                            <img src="../../../image/main/icon_attribute_italic.svg">
                        </div>
                    </div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getTitleSizeName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setTitleSize(currentElementList[0], JQuery('#' + chart.getTitleSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 53)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2 mb-10" v-show="currentElementList[0].attribute.chartOption.option.title[0].text">
                    <div class="main-text-tran-50">位置</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <select :id="chart.getTitleLocationName()" class="main-mas-basis-select" @change="chart.setTitleLocation(currentElementList[0], JQuery('#' + chart.getTitleLocationName()).val(), false); history.addHistory(store.clone(), 54); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                            <option :value="item.value" v-for="(item, index) in locationOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">单位</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getCompanyName()" @input="chart.setCompanyText(currentElementList[0], JQuery('#' + chart.getCompanyName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 55)" class="mas-basis-input mas-basis-input2" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-3 pl-60" v-show="currentElementList[0].attribute.chartOption.option.title[1].text">
                    <div class="main-mas-input-simple">
                        <div class="mas-basic-layout">
                            <el-color-picker @change="chart.setCompanyColor(currentElementList[0], $event);history.addHistory(store.clone(), 56); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.title[1].textStyle.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                        </div>
                    </div>
                    <div class="main-mas-input-simple similar-checkbox-single-bg">
                        <div :id="chart.getCompanyFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.title[1].textStyle.fontWeight === 'bolder' }" @click="chart.setCompanyFontWeight(currentElementList[0]);history.addHistory(store.clone(), 57);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                            <img src="../../../image/main/icon_attribute_bold.svg">
                        </div>
                        <div :id="chart.getCompanyFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.title[1].textStyle.fontStyle === 'oblique' }" @click="chart.setCompanyFontStyle(currentElementList[0]);history.addHistory(store.clone(), 58);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                            <img src="../../../image/main/icon_attribute_italic.svg">
                        </div>
                    </div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getCompanySizeName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setCompanySize(currentElementList[0], JQuery('#' + chart.getCompanySizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 59)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2" v-show="currentElementList[0].attribute.chartOption.option.title[1].text">
                    <div class="main-text-tran-50">位置</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <select :id="chart.getCompanyLocationName()" class="main-mas-basis-select" @change="chart.setCompanyLocation(currentElementList[0], JQuery('#' + chart.getCompanyLocationName()).val(), false); history.addHistory(store.clone(), 60);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                            <option :value="item.value" v-for="(item, index) in locationOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- 标注 -->
        <div class="attribute-echart-label main-panel-wrap" v-if="chart.showLabel(currentElementList[0].component)">
            <div class="base-row-item base-row-2">
                <div class="main-panel-title">
                    <span>标注</span>
                </div>
                <div class="base-row-flex-item">
                    <label class="main-mas-basis-checkbox mr-5">
                        <input :id="chart.getMarkMaxName()" @change="chart.setMarkMax(currentElementList[0], JQuery('#' + chart.getMarkMaxName()).is(':checked'), false); history.addHistory(store.clone(), 61);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" type="checkbox" />
                        <span>最大值</span>
                    </label>
                    <label class="main-mas-basis-checkbox">
                        <input :id="chart.getMarkMinName()" @change="chart.setMarkMin(currentElementList[0], JQuery('#' + chart.getMarkMinName()).is(':checked'), false); history.addHistory(store.clone(), 62);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" type="checkbox" />
                        <span>最小值</span>
                    </label>
                </div>
            </div>
            <div class="base-row-item base-row-3 pl-60" v-show="currentElementList[0].attribute.chartOption.chartStyle.markPoint.data[0].label.show || currentElementList[0].attribute.chartOption.chartStyle.markPoint.data[1].label.show">
                <div class="main-mas-input-simple">
                    <el-color-picker @change="chart.setMarkPointColor(currentElementList[0], $event);history.addHistory(store.clone(), 63); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.chartStyle.markPoint.data[0].label.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                </div>
                <div class="main-mas-input-simple similar-checkbox-single-bg">
                    <div :id="chart.getMarkFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.chartStyle.markPoint.data[0].label.fontWeight === 'bolder' }" @click="chart.setMarkFontWeight(currentElementList[0]);history.addHistory(store.clone(), 64);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                        <img src="../../../image/main/icon_attribute_bold.svg">
                    </div>
                    <div :id="chart.getMarkFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.chartStyle.markPoint.data[0].label.fontStyle === 'oblique' }" @click="chart.setMarkFontStyle(currentElementList[0]);history.addHistory(store.clone(), 65);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                        <img src="../../../image/main/icon_attribute_italic.svg">
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="chart.getMarkSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setMarkSize(currentElementList[0], JQuery('#' + chart.getMarkSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 66)" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 轴、网格线 -->
        <div class="attribute-echart-axisrgrid main-panel-wrap" v-if="chart.showAxis(currentElementList[0].component)">
            <div class="main-panel-title">
                <span>轴、网格线</span>
            </div>
            <div class="main-panel-content-wrap">
                <div v-if="chart.showAxisrgrid(currentElementList[0].component)">
                    <div class="base-row-item base-row-2">
                        <div class="main-panel-title">
                            <span>x轴</span>
                        </div>
                        <div class="base-row-flex-item">
                            <label class="main-mas-basis-checkbox mr-10">
                                <input :id="chart.getXAxisLabelName()" type="checkbox" @change="chart.setXAxisLabel(currentElementList[0], JQuery('#' + chart.getXAxisLabelName()).is(':checked'), false); history.addHistory(store.clone(), 67);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴标签</span>
                            </label>
                            <label class="main-mas-basis-checkbox">
                                <input :id="chart.getXAxisLineName()" type="checkbox" @change="chart.setXAxisLine(currentElementList[0], JQuery('#' + chart.getXAxisLineName()).is(':checked'), false); history.addHistory(store.clone(), 68);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴线</span>
                            </label>
                        </div>
                    </div>
                    <div class="base-row-item base-row-3 pl-60">
                        <div class="main-mas-input-simple">
                            <el-color-picker @change="chart.setXAxiscolor(currentElementList[0], $event);history.addHistory(store.clone(), 69); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.xAxis.axisLabel.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                        </div>
                        <div class="main-mas-input-simple similar-checkbox-single-bg">
                            <div :id="chart.getXAxisFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.xAxis.axisLabel.fontWeight === 'bolder' }" @click="chart.setXAxisFontWeight(currentElementList[0]);history.addHistory(store.clone(), 70);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_bold.svg">
                            </div>
                            <div :id="chart.getXAxisFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.xAxis.axisLabel.fontStyle === 'oblique' }" @click="chart.setXAxisFontStyle(currentElementList[0]);history.addHistory(store.clone(), 71);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_italic.svg">
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getXAxisSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setXAxisSize(currentElementList[0], JQuery('#' + chart.getXAxisSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 72)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="chart.showAxisrgridPolar(currentElementList[0].component)">
                    <div class="base-row-item base-row-2">
                        <div class="main-panel-title">
                            <span>径向轴</span>
                        </div>
                        <div class="base-row-flex-item">
                            <label class="main-mas-basis-checkbox mr-10">
                                <input :id="chart.getRadiusAxisLabelName()" type="checkbox" @change="chart.setRadiusAxisLabel(currentElementList[0], JQuery('#' + chart.getRadiusAxisLabelName()).is(':checked'), false); history.addHistory(store.clone(), 73);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴标签</span>
                            </label>
                            <label class="main-mas-basis-checkbox">
                                <input :id="chart.getRadiusAxisLineName()" type="checkbox" @change="chart.setRadiusAxisLine(currentElementList[0], JQuery('#' + chart.getRadiusAxisLineName()).is(':checked'), false); history.addHistory(store.clone(), 74);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴线</span>
                            </label>
                        </div>
                    </div>
                    <div class="base-row-item base-row-3 pl-60">
                        <div class="main-mas-input-simple">
                            <el-color-picker @change="chart.setRadiusAxiscolor(currentElementList[0], $event);history.addHistory(store.clone(), 75); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.radiusAxis.axisLabel.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                        </div>
                        <div class="main-mas-input-simple similar-checkbox-single-bg">
                            <div :id="chart.getRadiusAxisFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.radiusAxis.axisLabel.fontWeight === 'bolder' }" @click="chart.setRadiusAxisFontWeight(currentElementList[0]);history.addHistory(store.clone(), 76);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_bold.svg">
                            </div>
                            <div :id="chart.getRadiusAxisFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.radiusAxis.axisLabel.fontStyle === 'oblique' }" @click="chart.setRadiusAxisFontStyle(currentElementList[0]);history.addHistory(store.clone(), 77);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_italic.svg">
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getRadiusAxisSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setRadiusAxisSize(currentElementList[0], JQuery('#' + chart.getRadiusAxisSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 78)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="chart.showAxisrgrid(currentElementList[0].component)">
                    <div class="base-row-item base-row-2">
                        <div class="main-panel-title">
                            <span>y轴</span>
                        </div>
                        <div class="base-row-flex-item">
                            <label class="main-mas-basis-checkbox mr-10">
                                <input :id="chart.getYAxisLabelName()" type="checkbox" @change="chart.setYAxisLabel(currentElementList[0], JQuery('#' + chart.getYAxisLabelName()).is(':checked'), false); history.addHistory(store.clone(), 79);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴标签</span>
                            </label>
                            <label class="main-mas-basis-checkbox">
                                <input :id="chart.getYAxisLineName()" type="checkbox" @change="chart.setYAxisLine(currentElementList[0], JQuery('#' + chart.getYAxisLineName()).is(':checked'), false); history.addHistory(store.clone(), 80);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴线</span>
                            </label>
                        </div>
                    </div>
                    <div class="base-row-item base-row-3 pl-60">
                        <div class="main-mas-input-simple">
                            <el-color-picker @change="chart.setYAxiscolor(currentElementList[0], $event);history.addHistory(store.clone(), 81); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.yAxis.axisLabel.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                        </div>
                        <div class="main-mas-input-simple similar-checkbox-single-bg">
                            <div :id="chart.getYAxisFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.yAxis.axisLabel.fontWeight === 'bolder' }" @click="chart.setYAxisFontWeight(currentElementList[0]);history.addHistory(store.clone(), 82);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_bold.svg">
                            </div>
                            <div :id="chart.getYAxisFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.yAxis.axisLabel.fontStyle === 'oblique' }" @click="chart.setYAxisFontStyle(currentElementList[0]);history.addHistory(store.clone(), 83);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_italic.svg">
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getYAxisSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setYAxisSize(currentElementList[0], JQuery('#' + chart.getYAxisSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 84)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="chart.showAxisrgridPolar(currentElementList[0].component)">
                    <div class="base-row-item base-row-2">
                        <div class="main-panel-title">
                            <span>角度轴</span>
                        </div>
                        <div class="base-row-flex-item">
                            <label class="main-mas-basis-checkbox mr-10">
                                <input :id="chart.getAngleAxisLabelName()" type="checkbox" @change="chart.setAngleAxisLabel(currentElementList[0], JQuery('#' + chart.getAngleAxisLabelName()).is(':checked'), false); history.addHistory(store.clone(), 85);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴标签</span>
                            </label>
                            <label class="main-mas-basis-checkbox">
                                <input :id="chart.getAngleAxisLineName()" type="checkbox" @change="chart.setAngleLineLabel(currentElementList[0], JQuery('#' + chart.getAngleAxisLineName()).is(':checked'), false); history.addHistory(store.clone(), 86);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                                <span>轴线</span>
                            </label>
                        </div>
                    </div>
                    <div class="base-row-item base-row-3 pl-60">
                        <div class="main-mas-input-simple">
                            <el-color-picker @change="chart.setAngleAxiscolor(currentElementList[0], $event);history.addHistory(store.clone(), 87); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.angleAxis.axisLabel.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                        </div>
                        <div class="main-mas-input-simple similar-checkbox-single-bg">
                            <div :id="chart.getAngleAxisFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.angleAxis.axisLabel.fontWeight === 'bolder' }" @click="chart.setAngleAxisFontWeight(currentElementList[0]);history.addHistory(store.clone(), 88);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_bold.svg">
                            </div>
                            <div :id="chart.getAngleAxisFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.angleAxis.axisLabel.fontStyle === 'oblique' }" @click="chart.setAngleAxisFontStyle(currentElementList[0]);history.addHistory(store.clone(), 89);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <img src="../../../image/main/icon_attribute_italic.svg">
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getAngleAxisSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setAngleAxisSize(currentElementList[0], JQuery('#' + chart.getAngleAxisSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 90)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-panel-title">
                        <span>网格线</span>
                    </div>
                    <div class="base-row-flex-item">
                        <label class="main-mas-basis-checkbox mr-5" v-if="chart.showAxisrgrid(currentElementList[0].component)">
                            <input :id="chart.getXAxisSplitName()" type="checkbox" @change="chart.setXAxisSplit(currentElementList[0], JQuery('#' + chart.getXAxisSplitName()).is(':checked'), false); history.addHistory(store.clone(), 91);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                            <span>横向网格</span>
                        </label>
                        <label class="main-mas-basis-checkbox mr-5" v-if="chart.showAxisrgridPolar(currentElementList[0].component)">
                            <input :id="chart.getRadiusAxisSplitName()" type="checkbox" @change="chart.setRadiusAxisSplit(currentElementList[0], JQuery('#' + chart.getRadiusAxisSplitName()).is(':checked'), false); history.addHistory(store.clone(), 92);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                            <span>径向网格</span>
                        </label>
                        <label class="main-mas-basis-checkbox" v-if="chart.showAxisrgrid(currentElementList[0].component)">
                            <input :id="chart.getYAxisSplitName()" type="checkbox" @change="chart.setYAxisSplit(currentElementList[0], JQuery('#' + chart.getYAxisSplitName()).is(':checked'), false); history.addHistory(store.clone(), 93);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                            <span>纵向网格</span>
                        </label>
                        <label class="main-mas-basis-checkbox" v-if="chart.showAxisrgridPolar(currentElementList[0].component)">
                            <input :id="chart.getAngleAxisSplitName()" type="checkbox" @change="chart.setAngleAxisSplit(currentElementList[0], JQuery('#' + chart.getAngleAxisSplitName()).is(':checked'), false); history.addHistory(store.clone(), 94);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                            <span>角向网格</span>
                        </label>
                    </div>
                </div>
                <div class="axis-grid" v-if="chart.showAxisrgridMain(currentElementList[0].component)">
                    <div class="main-panel-title">
                        <span>主轴刻度线设置</span>
                    </div>
                    <div class="base-row-item base-row-2">
                        <div class="main-text-tran-50">显示间隔</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <select :id="chart.getAxisIntervalName()" class="main-mas-basis-select" @change="chart.setAxisInterval(currentElementList[0], JQuery('#' + chart.getAxisIntervalName()).val(), false); history.addHistory(store.clone(), 95);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                    <option :value="item.value" v-for="(item, index) in displayInterval" :key="index">{{ item.label }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item base-row-2">
                        <div class="main-text-tran-50">旋转角度</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getAxisRotateName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setAxisRotate(currentElementList[0], JQuery('#' + chart.getAxisRotateName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 96)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图例 -->
        <div class="attribute-echart-legend main-panel-wrap" v-if="chart.showLegend(currentElementList[0].component)">
            <div class="base-row-item base-row-2">
                <div class="main-panel-title">
                    <span>图例</span>
                </div>
                <label class="main-mas-basis-checkbox">
                    <input :id="chart.getLegendShowName()" type="checkbox" @change="chart.setLegendShow(currentElementList[0], JQuery('#' + chart.getLegendShowName()).is(':checked'), false); history.addHistory(store.clone(), 97);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                    <span>图例显示</span>
                </label>
            </div>
            <div class="base-row-item base-row-3 pl-60" v-show="currentElementList[0].attribute.chartOption.option.legend.show">
                <div class="main-mas-input-simple">
                    <el-color-picker @change="chart.setLegendColor(currentElementList[0], $event);history.addHistory(store.clone(), 98); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" v-model="currentElementList[0].attribute.chartOption.option.legend.textStyle.color" class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                </div>
                <div class="main-mas-input-simple similar-checkbox-single-bg">
                    <div :id="chart.getLegendFontWeightName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.legend.textStyle.fontWeight === 'bolder'}" @click="chart.setLegendFontWeight(currentElementList[0]);history.addHistory(store.clone(), 99);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                        <img src="../../../image/main/icon_attribute_bold.svg" alt="">
                    </div>
                    <div :id="chart.getLegendFontStyleName()" class="similar-checkbox-single" :class="{ 'selected-similar' : currentElementList[0].attribute.chartOption.option.legend.textStyle.fontStyle === 'oblique'}" @click="chart.setLegendFontStyle(currentElementList[0]);history.addHistory(store.clone(), 100);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                        <img src="../../../image/main/icon_attribute_italic.svg">
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input :id="chart.getLegendSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setLegendSize(currentElementList[0], JQuery('#' + chart.getLegendSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 101)" />
                    </div>
                </div>
            </div>
            <div class="base-legend-location pl-60" v-show="currentElementList[0].attribute.chartOption.option.legend.show">
                <div class="main-text-tran-50">位置</div>
                <div>
                    <el-row type="flex" justify="space-between" align="middle">
                        <span class="normal-legend legend-tl" :class="[(legendTop==='top' && legendLeft === 'left') ? 'selected-legend' : '']" @click="changeLegend($event, '左上');history.addHistory(store.clone(), 102)" title="左上"></span>
                        <span class="normal-legend legend-tc" :class="[(legendTop==='top' && legendLeft === 'center') ? 'selected-legend' : '']" @click="changeLegend($event, '上');history.addHistory(store.clone(), 102)" title="上"></span>
                        <span class="normal-legend legend-tr" :class="[(legendTop==='top' && legendLeft === 'right') ? 'selected-legend' : '']" @click="changeLegend($event, '右上');history.addHistory(store.clone(), 102)" title="右上"></span>
                    </el-row>
                    <el-row type="flex" justify="space-between" align="middle" v-if="islegendShow">
                        <span class="normal-legend legend-l" :class="[(legendTop==='middle' && legendLeft === 'left') ? 'selected-legend' : '']" @click="changeLegend($event, '左');history.addHistory(store.clone(), 102)" title="左"></span>
                        <span class="normal-legend legend-r" :class="[(legendTop==='middle' && legendLeft === 'auto') ? 'selected-legend' : '']" @click="changeLegend($event, '右');history.addHistory(store.clone(), 102)" title="右"></span>
                    </el-row>
                    <el-row type="flex" justify="space-between" align="middle">
                        <span class="normal-legend legend-bl" :class="[(legendTop==='bottom' && legendLeft === 'left') ? 'selected-legend' : '']" @click="changeLegend($event, '左下');history.addHistory(store.clone(), 102)" title="左下"></span>
                        <span class="normal-legend legend-bc" :class="[(legendTop==='bottom' && legendLeft === 'center') ? 'selected-legend' : '']" @click="changeLegend($event, '下');history.addHistory(store.clone(), 102)" title="下"></span>
                        <span class="normal-legend legend-br" :class="[(legendTop==='bottom' && legendLeft === 'right') ? 'selected-legend' : '']" @click="changeLegend($event, '右下');history.addHistory(store.clone(), 102)" title="右下"></span>
                    </el-row>
                </div>
            </div>
        </div>
        <!-- bar line 系列设置 -->
        <div class="attribute-echart-baseseries main-panel-wrap" v-if="chart.showBaseseries(currentElementList[0].component)">
            <div class="main-panel-title">
                <span>系列设置</span>
            </div>
            <div class="main-panel-content-wrap">
                <div class="base-row-item base-row-2" v-if="chart.showBaseseriesBar(currentElementList[0].component)">
                    <div class="main-text-tran-50">柱条宽度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getStyleWidthName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setBarWidth(currentElementList[0], JQuery('#' + chart.getStyleWidthName()).val(), true); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 103)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2" v-if="chart.showBaseseriesLine(currentElementList[0].component)">
                    <div class="main-text-tran-50">线条粗细</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getStyleWidthName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setLineWidth(currentElementList[0], JQuery('#' + chart.getStyleWidthName()).val(), true); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 104)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2" v-if="chart.showBaseseriesLine(currentElementList[0].component)">
                    <div class="main-text-tran-50">线条类型</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <select :id="chart.getLineTypeName()" class="main-mas-basis-select" @change="chart.setLineType(currentElementList[0], JQuery('#' + chart.getLineTypeName()).val(), true); history.addHistory(store.clone(), 105);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });">
                                <option :value="item.value" v-for="(item, index) in lineTypeOption" :key="index">{{ item.label }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 饼图宽度设置 -->
        <div class="attribute-echart-basepie main-panel-wrap" v-if="chart.showBasepie(currentElementList[0].component)">
            <div class="main-panel-title">
                <span>宽度设置</span>
            </div>
            <div class="main-panel-content-wrap">
                <div class="base-row-item base-row-2" v-if="currentElementList[0].component === 'Pie0101'">
                    <div class="main-text-tran-50">宽度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getPieWidthSolidName()" type="text" class="mas-basis-input mas-basis-input2" @input="chart.setPieWidthSolid(currentElementList[0], JQuery('#' + chart.getPieWidthSolidName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 106)" />
                        </div>
                    </div>
                </div>
                <div v-if="currentElementList[0].component === 'Pie0102'">
                    <div class="main-panel-title">
                        <span>内层圆</span>
                    </div>
                    <div class="base-row-item base-row-2">
                        <div class="main-text-tran-50">宽度</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getPieWidthInName()" type="text" class="mas-basis-input mas-basis-input2" @input="chart.setPieWidthIn(currentElementList[0], JQuery('#' + chart.getPieWidthInName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 106)" />
                            </div>
                        </div>
                    </div>
                    <div class="main-panel-title">
                        <span>外层圆</span>
                    </div>
                    <div class="base-row-item base-row-4">
                        <div class="main-text-tran-50">宽度</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getPieWidthOut1Name()" type="text" class="mas-basis-input mas-basis-input2" @input="chart.setPieWidthOut1(currentElementList[0], JQuery('#' + chart.getPieWidthOut1Name()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 106)" />
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="chart.getPieWidthOut2Name()" type="text" class="mas-basis-input mas-basis-input2" @input="chart.setPieWidthOut2(currentElementList[0], JQuery('#' + chart.getPieWidthOut2Name()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 106)" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-4" v-if="currentElementList[0].component != 'Pie0101' && currentElementList[0].component != 'Pie0102'">
                    <div class="main-text-tran-50">宽度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getPieWidthSolidInName()" type="text" class="mas-basis-input mas-basis-input2" @input="chart.setPieWidthSolidIn(currentElementList[0], JQuery('#' + chart.getPieWidthSolidInName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 106)" />
                        </div>
                    </div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getPieWidthHollowOutName()" type="text" class="mas-basis-input mas-basis-input2" @input="chart.setPieWidthHollowOut(currentElementList[0], JQuery('#' + chart.getPieWidthHollowOutName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 106)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 仪表盘设置 -->
        <div class="attribute-echart-panel" v-if="chart.showPanel(currentElementList[0].component)">
            <div class="main-panel-wrap-border" v-if="currentElementList[0].component === 'Panel0101' || currentElementList[0].component === 'Panel0103'">
                <div class="base-row-item base-row-2">
                    <div class="main-panel-title">
                        <span>进度条</span>
                    </div>
                    <label class="main-mas-basis-checkbox">
                        <input :id="chart.getProgerssShowName()" type="checkbox" @change="chart.setProgerssShow(currentElementList[0], JQuery('#' + chart.getProgerssShowName()).is(':checked'), true); history.addHistory(store.clone(), 107);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                        <span>是否显示</span>
                    </label>
                </div>
                <div class="base-row-item base-row-2" v-show="currentElementList[0].attribute.chartOption.chartStyle.progress.show">
                    <div class="main-text-tran-50">宽度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getProgressWidthName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setProgressWidth(currentElementList[0], JQuery('#' + chart.getProgressWidthName()).val(), true); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 108)" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-panel-wrap-border">
                <div class="main-panel-title">
                    <span>轴线</span>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">宽度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getAxisLineWidthName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setAxisLineWidth(currentElementList[0], JQuery('#' + chart.getAxisLineWidthName()).val(), true); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 109)" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-panel-wrap-border">
                <div class="base-row-item base-row-2">
                    <div class="main-panel-title">
                        <span>刻度样式</span>
                    </div>
                    <label class="main-mas-basis-checkbox">
                        <input :id="chart.getAxisTickShowName()" type="checkbox" @change="chart.setAxisTickShow(currentElementList[0], JQuery('#' + chart.getAxisTickShowName()).is(':checked'), true); history.addHistory(store.clone(), 110);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                        <span>是否显示</span>
                    </label>
                </div>
            </div>
            <div class="main-panel-wrap-border">
                <div class="main-panel-title">
                    <span>分隔线样式</span>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">分隔线线长</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getSplitLineLengthName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setSplitLineLength(currentElementList[0], JQuery('#' + chart.getSplitLineLengthName()).val(), true); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 111)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">线宽</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getSplitLineWidthName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setSplitLineWidth(currentElementList[0], JQuery('#' + chart.getSplitLineWidthName()).val(), true); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 112)" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-panel-wrap-border">
                <div class="main-panel-title">
                    <span>刻度标签</span>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">距离</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getAxisLabelDistanceName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setAxisLabelDistance(currentElementList[0], JQuery('#' + chart.getAxisLabelDistanceName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 113)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">字体大小</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getAxisLabelSizeName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setAxisLabelSize(currentElementList[0], JQuery('#' + chart.getAxisLabelSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 114)" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-panel-wrap-border" v-if="currentElementList[0].component === 'Panel0101' || currentElementList[0].component === 'Panel0103'">
                <div class="base-row-item base-row-2">
                    <div class="main-panel-title">
                        <span>中心点</span>
                    </div>
                    <label class="main-mas-basis-checkbox">
                        <input :id="chart.getAnchorShowName()" type="checkbox" @change="chart.setAnchorShow(currentElementList[0], JQuery('#' + chart.getAnchorShowName()).is(':checked'), true); history.addHistory(store.clone(), 115);register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" />
                        <span>是否显示</span>
                    </label>
                </div>
            </div>
            <div class="main-panel-wrap-border">
                <div class="main-panel-title">
                    <span>文字</span>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">字体大小</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getDetailSizeName()" :min="0" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setDetailSize(currentElementList[0], JQuery('#' + chart.getDetailSizeName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 116)" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-panel-wrap-border" v-if="currentElementList[0].component === 'Panel0101' || currentElementList[0].component === 'Panel0102'">
                <div class="main-panel-title">
                    <span>仪表盘指针</span>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">指针长度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getPointerLengthName()" class="mas-basis-input mas-basis-input2" @input="chart.setPointerLength(currentElementList[0], JQuery('#' + chart.getPointerLengthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 117)" />
                        </div>
                    </div>
                </div>
                <div class="base-row-item base-row-2">
                    <div class="main-text-tran-50">指针宽度</div>
                    <div class="main-mas-input-simple main-mas-input-simple-input">
                        <div class="mas-basic-layout">
                            <input :id="chart.getPointerWidthName()" type="number" class="mas-basis-input mas-basis-input2" @input="chart.setPointerWidth(currentElementList[0], JQuery('#' + chart.getPointerWidthName()).val(), false); register.redraw(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`, { deltay: 0 });" @change="history.addHistory(store.clone(), 118)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="edit-data-btn" @click="openEdit">编辑数据</div>
    </div>
</template>
<script>
import store from '@/js/store/state.js';
import chart from '@/js/main/attribute/chart.js';
import history from '@/js/main/history.js';
import JQuery from 'jquery';
import system from '@/js/main/system.js';
import register from '@/js/main/register.js';
import message from '@/js/util/message.js';
import editor from '@/js/main/editor.js';
export default {
    name: 'EchartAttr',
    computed: {
        legendLeft() {
            return this.currentElementList[0].attribute.chartOption.option.legend.left;
        },
        legendTop() {
            return this.currentElementList[0].attribute.chartOption.option.legend.top;
        },
        islegendShow() {
            let component = this.currentElementList[0].component;
            let flag = false;
            switch (component) {
                case 'Pie0101':
                case 'Pie0102':
                case 'Pie02':
                case 'Pie0301':
                case 'Pie0302':
                case 'Pie0401':
                case 'Pie0402':
                    flag = true;
                    break;
                default:
                    flag = false;
                    break;
            }
            return flag;
        }
    },
    data() {
        return {
            currentElementList: store.getCurrentElementList(),
            chart: chart,
            history: history,
            store: store,
            JQuery: JQuery,
            register: register,
            system: system,
            locationOption: [
                {
                    label: '左上',
                    value: 'left'
                },
                {
                    label: '中上',
                    value: 'center'
                },
                {
                    label: '右上',
                    value: 'right'
                }
            ],
            displayInterval: [
                {
                    value: 'auto',
                    label: '自适应'
                },
                {
                    value: 0,
                    label: '0'
                },
                {
                    value: 1,
                    label: '1'
                },
                {
                    value: 2,
                    label: '2'
                },
                {
                    value: 3,
                    label: '3'
                },
                {
                    value: 4,
                    label: '4'
                },
                {
                    value: 5,
                    label: '5'
                },
                {
                    value: 6,
                    label: '6'
                },
                {
                    value: 7,
                    label: '7'
                },
                {
                    value: 8,
                    label: '8'
                },
                {
                    value: 9,
                    label: '9'
                },
                {
                    value: 10,
                    label: '10'
                }
            ],
            lineTypeOption: [
                {
                    label: '实线',
                    value: 'solid'
                },
                {
                    label: '虚线',
                    value: 'dotted'
                }
            ],
            legendList: [
                {
                    name: '左上',
                    value: 'top,left,horizontal'
                },
                {
                    name: '上',
                    value: 'top,center,horizontal'
                },
                {
                    name: '右上',
                    value: 'top,right,horizontal'
                },
                {
                    name: '左',
                    value: 'middle,left,vertical'
                },
                {
                    name: '右',
                    value: 'middle,right,vertical'
                },
                {
                    name: '左下',
                    value: 'bottom,left,horizontal'
                },
                {
                    name: '下',
                    value: 'bottom,center,horizontal'
                },
                {
                    name: '右下',
                    value: 'bottom,right,horizontal'
                }
            ]
        };
    },
    mounted() {
        chart.setAttribute(this.currentElementList[0]);
    },
    methods: {
        openEdit() {
            editor.setUrl(this.currentElementList[0].data.url);
            editor.setType(this.currentElementList[0].data.type);
            editor.setMethod(this.currentElementList[0].data.method);
            editor.setValue(this.currentElementList[0].data.value);
            editor.setInterval(this.currentElementList[0].attribute.interval);
            editor.setMode(this.getFiledShow(this.currentElementList[0].component));
            editor.setField(this.currentElementList[0].data.field);
            editor.setComplete(this.complete);
            editor.open();
        },
        complete(completeEditMap) {
            if (completeEditMap.type === 'dynamic') {
                if (!completeEditMap.data.length) {
                    message.message('请先选择数据', 'warning');
                    return false;
                }
                if (!completeEditMap.url) {
                    message.message('请填写url地址', 'warning');
                    return false;
                }
                this.currentElementList[0].data.url = completeEditMap.url;
                let keys = [];
                for (let index = 1; index < completeEditMap.objectKey.length; index++) {
                    keys.push(completeEditMap.objectKey[index]);
                }
                this.currentElementList[0].data.key = keys;
                this.currentElementList[0].data.type = 'dynamic';
                this.currentElementList[0].attribute.interval = completeEditMap.interval;
                this.currentElementList[0].data.method = completeEditMap.method;
            } else {
                this.currentElementList[0].data.type = 'static';
                this.currentElementList[0].data.url = '';
                this.currentElementList[0].data.key = [];
                this.currentElementList[0].attribute.interval = -1;
                this.currentElementList[0].data.value = completeEditMap.data;
            }
            register.getComponentById(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`).setData(completeEditMap.data);
            register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`, { deltay: 500 });
            editor.close();
        },
        changeLegend(e, name) {
            if (e.target.className.indexOf('selected-legend') == -1) {
                this.setLegend(name);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`, { deltay: 0 });
            }
        },
        setLegend(name = '左上') {
            let value = this.legendList.filter((_) => _.name === name)[0].value;
            let arr = value.split(',');
            let top = arr[0];
            let left = arr[1];
            let orient = arr[2];
            if (this.currentElementList[0].attribute.chartOption.option.legend.top) {
                this.currentElementList[0].attribute.chartOption.option.legend.top = top;
            } else {
                this.$set(this.currentElementList[0].option.legend, 'top', top);
            }
            if (this.currentElementList[0].attribute.chartOption.option.legend.left) {
                this.currentElementList[0].attribute.chartOption.option.legend.left = left;
            } else {
                this.$set(this.currentElementList[0].attribute.chartOption.option.legend, 'left', left);
            }
            if (this.currentElementList[0].attribute.chartOption.option.legend.orient) {
                this.currentElementList[0].attribute.chartOption.option.legend.orient = orient;
            } else {
                this.$set(this.currentElementList[0].attribute.chartOption.option.legend, 'orient', orient);
            }
            if (name === '右') {
                if (this.currentElementList[0].attribute.chartOption.option.legend.right) {
                    this.currentElementList[0].attribute.chartOption.option.legend.right = left;
                } else {
                    this.$set(this.currentElementList[0].attribute.chartOption.option.legend, 'right', left);
                }
                this.currentElementList[0].attribute.chartOption.option.legend.left = 'auto';
            }
            if (this.currentElementList[0].attribute.chartOption.option.grid) {
                this.setGrid();
            }
        },
        setGrid() {
            let left = this.currentElementList[0].attribute.chartOption.option.legend.left;
            let top = this.currentElementList[0].attribute.chartOption.option.legend.top;
            if ((top === 'top' && left === 'left') || (top === 'top' && left === 'center') || (top === 'top' && left === 'right')) {
                this.currentElementList[0].attribute.chartOption.option.grid.top = '35';
                this.currentElementList[0].attribute.chartOption.option.grid.bottom = '3%';
            }
            if ((top === 'middle' && left === 'left') || (top === 'middle' && left === 'auto')) {
                this.currentElementList[0].attribute.chartOption.option.grid.top = '20';
                this.currentElementList[0].attribute.chartOption.option.grid.bottom = '3%';
            }
            if ((top === 'bottom' && left === 'left') || (top === 'bottom' && left === 'center') || (top === 'bottom' && left === 'right')) {
                this.currentElementList[0].attribute.chartOption.option.grid.top = '20';
                this.currentElementList[0].attribute.chartOption.option.grid.bottom = '35';
            }
        },
        getFiledShow(component = '') {
            let mode = '0';
            switch (component) {
                case 'PolarBar':
                case 'Mixed':
                case 'Bubble01':
                case 'Bubble02':
                case 'ScatterDiagram02':
                case 'Radar01':
                case 'Panel0101':
                case 'Panel0102':
                case 'Panel0103':
                case 'Sankey':
                case 'Relationship01':
                case 'Relationship02':
                case 'Surface01':
                case 'Surface02':
                case 'Heat01':
                case 'Heat02':
                case 'Histogram01':
                case 'Histogram02':
                case 'Scatter3D':
                case 'Pie0101':
                case 'Pie0102':
                case 'Pie02':
                case 'Pie0301':
                case 'Pie0302':
                case 'Pie0401':
                case 'Pie0402':
                case 'Funnel01':
                case 'Funnel02':
                    mode = '1';
                    break;
                case 'VTable':
                    mode = '2';
                    break;
                default:
                    mode = '0';
                    break;
            }
            return mode;
        }
    }
};
</script>

<style lang="scss" scoped>
$m5: 5px;
$m10: 10px;
$m60: 60px + 6px;
.echart-attr {
    position: relative;
    padding-bottom: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .edit-data-btn {
        height: 30px;
        line-height: 30px;
        background: #ffffff0f;
        color: $FontWhite;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
            background: #ffffff33;
        }
    }
    ::v-deep .el-input--mini .el-input__inner {
        height: 20px !important;
        color: red !important;
    }
    .base-row-item {
        height: 30px;
        width: 100%;
        display: grid;
        grid-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
    }
    .base-row-flex-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }
    .mb-10 {
        margin-bottom: $m10;
    }
    .pl-60 {
        padding-left: $m60;
    }
    .base-row-2 {
        grid-template-columns: 60px 1fr 0;
    }
    .base-row-3 {
        grid-template-columns: 30px 60px 1fr 0;
    }
    .base-row-4 {
        grid-template-columns: 54px 1fr 1fr 0;
    }
    .mr-10 {
        margin-right: $m10;
    }
    .mr-5 {
        margin-right: $m5;
    }
}
.attribute-echart-title-unit {
    position: relative;
}
.attribute-echart-label {
    position: relative;
}
.attribute-echart-axisrgrid {
    position: relative;
    .axis-grid {
        display: grid;
        grid-gap: 6px;
    }
}
.attribute-echart-legend {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-row-gap: 6px;
    .base-legend-location {
        display: grid;
        grid-gap: 6px;
        grid-template-columns: 30px 90px 30px;
    }
    .normal-legend {
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 2px 4px;
        cursor: pointer;
        border: 1px solid #ffffff17;
        font-weight: 500;
        border-radius: 1px;
        font-size: 12px;
        background: #161a2c;
        color: #ffffff17;
        position: relative;
        background-color: #ffffff0f;
        &::after {
            content: '';
            display: flex;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
        }
    }
    .selected-legend {
        background: #ffffff4d;
        color: #ffffff;
    }

    .legend-tl {
        &::after {
            background: url('../../../image/main/legend_location_topleft.svg');
            background-size: 100% 100%;
        }
    }
    .legend-tc {
        &::after {
            background: url('../../../image/main/legend_location_topcenter.svg');
            background-size: 100% 100%;
        }
    }
    .legend-tr {
        &::after {
            background: url('../../../image/main/legend_location_topright.svg');
            background-size: 100% 100%;
        }
    }
    .legend-l {
        &::after {
            background: url('../../../image/main/legend_location_left.svg');
            background-size: 100% 100%;
        }
    }
    .legend-r {
        &::after {
            background: url('../../../image/main/legend_location_right.svg');
            background-size: 100% 100%;
        }
    }
    .legend-bl {
        &::after {
            background: url('../../../image/main/legend_location_bottomleft.svg');
            background-size: 100% 100%;
        }
    }
    .legend-bc {
        &::after {
            background: url('../../../image/main/legend_location_bottomcenter.svg');
            background-size: 100% 100%;
        }
    }
    .legend-br {
        &::after {
            background: url('../../../image/main/legend_location_bottomright.svg');
            background-size: 100% 100%;
        }
    }
}
.attribute-echart-baseseries {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-row-gap: 6px;
}
.attribute-echart-basepie {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-row-gap: 6px;
}
.attribute-echart-panel {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-row-gap: 6px;
}
.main-panel-wrap-border {
    display: grid;
    grid-row-gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff0f;
}
</style>